// 公共样式
export const commonStyle = {
	rotate: 0,
	opacity: 1,
};

export const commonAttr = {
	animations: [],
	events: {},
	groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
	isLock: false, // 是否锁定组件
	collapseName: 'style', // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
	linkage: {
		duration: 0, // 过渡持续时间
		data: [
			// 组件联动
			{
				id: '', // 联动的组件 id
				label: '', // 联动的组件名称
				event: '', // 监听事件
				style: [{ key: '', value: '' }], // 监听的事件触发时，需要改变的属性
			},
		],
	},
};

// 编辑器左侧组件列表
const list = [

	{
		component: 'VText',
		label: '文字',
		propValue: '双击编辑文字',
		icon: 'wenben',
		request: {
			method: 'GET',
			data: [],
			url: '',
			series: false, // 是否定时发送请求
			time: 1000, // 定时更新时间
			paramType: '', // string object array
			requestCount: 0, // 请求次数限制，0 为无限
		},
		style: {
			width: 200,
			height: 28,
			fontSize: '',
			fontWeight: 400,
			lineHeight: '',
			letterSpacing: 0,
			textAlign: '',
			color: '#fff',
		},
	},
	{
		component: 'VButton',
		label: '按钮',
		propValue: '按钮',
		icon: 'button',
		style: {
			width: 100,
			height: 34,
			borderWidth: 1,
			borderColor: '',
			borderRadius: '',
			fontSize: '',
			fontWeight: 400,
			lineHeight: '',
			letterSpacing: 0,
			textAlign: '',
			color: '',
			backgroundColor: '',
		},
	},
	{
		component: 'VChart',
		label: '柱状图',
		icon: 'el-icon-data-analysis',
		propValue: {
			chart: 'VChart',
			option: {
				title: {
					text: '柱状图',
					show: true,
				},
				legend: {
					show: true,
					top: '20%',
				},
				tooltip: {
					show: true,
					trigger: 'item',
				},
				grid: {
					// top: 0,
					// bottom: -50
				},
				xAxis: {
					show: true,
					data: ['A', 'B', 'C', 'D', 'E'],
				},
				yAxis: {},
				series: {
					type: 'bar',
					name: '销量',
					data: [23, 61, 35, 77, 35],
					itemStyle: {
						barBorderRadius: 5,
						borderWidth: 1,
						borderType: 'solid',
						borderColor: '#73c0de',
						shadowColor: '#5470c6',
						shadowBlur: 3,
					},
				},
			},
		},
		style: {
			width: 800,
			height: 500,
			borderRadius: '',
		},
	},
	{
		component: 'VChart',
		label: '饼图',
		icon: 'el-icon-data-analysis',
		propValue: {
			chart: 'VChart',
			option: {
				title: {
					text: 123,
					show: true,
				},
				legend: {
					show: true,
					top: '6%',
					bottom: '10%',
				},
				tooltip: {
					show: true,
					trigger: 'item',
				},
				xAxis: {
					show: true,
					data: ['A', 'B', 'C', 'D', 'E'],
				},
				yAxis: {},
				series: {
					type: 'pie',
					name: '销量',
					// center: ['30%', '50%'],
					data: [
						{ value: 40, name: 'rose 1' },
						{ value: 38, name: 'rose 2' },
						{ value: 32, name: 'rose 3' },
						{ value: 30, name: 'rose 4' },
						{ value: 28, name: 'rose 5' },
						{ value: 26, name: 'rose 6' },
						{ value: 22, name: 'rose 7' },
						{ value: 18, name: 'rose 8' },
					],
					itemStyle: {
						barBorderRadius: 5,
						borderWidth: 1,
						borderType: 'solid',
						borderColor: '#73c0de',
						shadowColor: '#5470c6',
						shadowBlur: 3,
					},
				},
			},
		},
		style: {
			width: 800,
			height: 500,
			borderRadius: '',
		},
	},
	{
		component: 'VLine',
		label: '折线图',
		icon: 'el-icon-data-analysis',
		propValue: {
			chart: 'VLine',
			option: {
				wsUrl: "",
				boxTitle: {
					text: '用户访问量',
					show: true,
					typeName: "人"
				},
				title: {
					text: '',
					show: true,
				},
				legend: {
					show: true, // 显示图例
					icon: 'circle', // 图例的标识改成圆点
					bottom: 10, // 距离底部0
					itemGap: 10, // 图例各个元素之间的距离为20
				},
				tooltip: {
					show: true,
					trigger: 'item',
				},
				xAxis: {
					show: true,
					data: ['A', 'B', 'C', 'D', 'E'],
					boundaryGap: false,
				},
				yAxis: {
					show: true,
					boundaryGap: false,

				},
				grid: {
					top: '10%',
					left: '3%',
					right: '3%',
					bottom: '6%',
					containLabel: true
				},
				series: {
					type: 'line',
					// roseType: 'area',
					// radius: ['0', '30%'],
					// center: ['50%', '40%'], // 图表在容器的位置
					smooth: true,
					label: {
						show: false,
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0, color: '#409eff' // 0% 处的颜色
							}, {
								offset: 1, color: 'rgba(0, 0, 0, 0.5)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					data: [
						{ "value": 10, "name": "过热" },
						{ "value": 55, "name": "系统错误" },
						{ "value": 40, "name": "逆变器报警" },
						{ "value": 15, "name": "系统错误" },
						{ "value": 60, "name": "报错" },
					],
				},
			},
		},
		style: {
			width: 800,
			height: 400,
			borderRadius: '',
		},
	},
];

for (let i = 0, len = list.length; i < len; i++) {
	const item = list[i];
	item.style = { ...commonStyle, ...item.style };
	list[i] = { ...commonAttr, ...item };
}

export default list;
